<template>
  <div class="info-detail">
    <el-form :model="value" :rules="productInfoRules" label-width="150px" label-suffix=":"
      style="width: 600px; margin-top: 30px;" ref="productInfoForm">
      <el-form-item label="商品分类" prop="productCategoryId">
        <el-cascader style="width: 100%;" clearable v-model="productCateValue" :options="productCateOptions"
          :props="{ expandTrigger: 'hover' }" />
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="value.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题" prop="subTitle">
        <el-input v-model="value.subTitle"></el-input>
      </el-form-item>
      <el-form-item label="商品货号">
        <el-input v-model="value.productSn"></el-input>
      </el-form-item>
      <el-form-item label="市场价">
        <el-input v-model="value.originalPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品售价">
        <el-input v-model="value.price"></el-input>
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="value.store"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="value.sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="handleNext()">下一步, 填写商品促销</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from "vue";
import { getCategoryWithChildren } from "../../../../api/categoryApi.js";
import { ElMessage } from "element-plus";
export default {
  name: "ProductInfoDetail",
  emits: ['nextStep'],
  props: {
    value: Object,
  },
  setup(props, context) {
    const productInfoForm = ref(null);
    const state = reactive({
      // 表单校验的规则对象
      productInfoRules: {
        productCategoryId: [
          { required: true, message: '请选择商品分类', trigger: 'blur' },

        ],
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' },
        ],
        subTitle: [
          { required: true, message: '请输入商品副标题', trigger: 'blur' },
          { min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' },
        ],
      },

      // 处理好之后的分类数据
      productCateOptions: [],

      // 选中的分类数据
      productCateValue: [],
    });
    onMounted(() => {
      getAllCategory();
    })
    // 获取所有的分类数据
    const getAllCategory = async () => {
      const res = await getCategoryWithChildren()
      if (res.status === 1) {
        let listArr = res.data;
        state.productCateOptions = [];
        // 把数据处理成级联列表需要的数据格式
        for (let i = 0; i < listArr.length; i++) {
          let children = [];
          if (listArr[i].children.length > 0) {
            for (let j = 0; j < listArr[i].children.length; j++) {
              children.push({
                value: listArr[i].children[j].id,
                label: listArr[i].children[j].name,
              })
            }
          }
          // 对children的长度进行判断，如果为0，则不添加children
          children = children.length > 0 ? children : null;
          state.productCateOptions.push({
            value: listArr[i].id,
            label: listArr[i].name,
            children: children,
          })
        }
        console.log(state.productCateOptions)

      } else {
        ElMessage.error('获取分类数据失败!');
      }
    }
    // 到下一页
    const handleNext = () => {
      context.emit('nextStep')
      console.log(state.productCateValue)
    };

    // const handleChange = (value) => {
    //   console.log(value);
    // };

    return {
      ...toRefs(state),
      handleNext,
      productInfoForm,
      // handleChange
    };
  }
}
</script>

<style scoped lang="less">
</style>